<template>
 <div class="goodsDetail">
     <div class="detail-nav">
         <router-link 
         class="nav-item"
         tag="div"
         :to=" '/goods/detail/'+getGid+ '/'+item.id" 
         v-for="(item,index) in navList"
         :key="index"
         :data-id="item.id"
         active-class="active"
         @click.native="getData(index,item.id)"
         >
         {{item.title}}
         </router-link>
     </div>
     <div v-if="detailId===1" class="goodsGid">
         <table>
             <tr>
                 <td style="width:30%;background:rgb(246,246,246);text-align:center;">商品编号</td>
                 <td>{{getGid}}</td>
             </tr>
         </table>
     </div>
     <router-view :render="renderStr"></router-view>
 </div>
</template>
 
<script>
export default {
    data() {
        return {
            navList:[],
            positionLeft:0,
            detailId:1,
            renderStr:'',
        }
    },
   async mounted(){
       await this._loadData();
    },
    computed:{
        getGid() {
            return this.$route.params.gid-0;
        },
        getPos() {
            return this.positionLeft * (1 / this.navList.length) + '%'
        }
    },
    methods:{
       async _loadData() {
           await this.$http.get({
        url: "/goods.html",
        params: {
            do: 'getTopNav',
            gid: this.$route.params.gid,
            id: 1,
            system: 'wap',
            isWeb: 1,
            version: 517,
            distinct_id: '17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7'
        },
      }).then((res)=>{
         let {list} = res;
         this.navList = list;
      })
        },
       
        getData(index,id) {
            this.positionLeft = index;
            this.detailId = id;
             this.$http.get({
                url:'/goods.html',
                params:{
                    do: 'getContent',
                    gid: this.$route.params.gid-0,
                    id: this.$route.params.id-0,
                    system: 'wap',
                    isWeb: 1,
                    version: 517,
                    distinct_id: '17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7'
                }
            }).then((res)=>{
                let {content, announce} = res;
                this.renderStr = (content ? content.replace(/src0/g,'src') : announce.replace(/src0/g,'src')) + '<style>.detailSelect img{width:100%;}.detailSelect{padding:10px;margin-top:10px;}</style>'
            })
        }

    }
}
</script>
 
<style scoped lang = "stylus">
.detail-nav
    display flex
    width 75%
    text-align center
    font-size .14rem
    border-bottom 1px solid #f3f4f5
    .nav-item
        position relative
        flex 1
        height .45rem
        line-height .45rem

  
.active
    color #04BE02
.active::after
    position absolute
    bottom 0
    left 50%
    transform translateX(-50%)
    content ''
    display block
    width .15rem
    height .04rem
    background #04BE02
    transition all .5s

.goodsGid 
    margin 10px 10px 5px
    table 
        width 100%
        td
            font-size 14px
            padding: 3px;
            border: 1px solid #e7e7e7;
    
        
</style>